<template>
	<view class="agepage">
		<u-sticky bgColor="#fff">
			<view style="padding: 20rpx 40rpx">
				<view style="display: flex;background: rgb(242, 242, 242);border-radius: 15px;padding-right: 10rpx;">
					<view class="selectbox" @click="onselect(queryParams.status)">
						<view class="value" v-if="queryParams.status">{{dictLabel(rectification_status, queryParams.status)}}</view>
						<view class="value" v-else style="color: #aaa;">请选择</view>
						<view v-if="queryParams.status" @click.stop="onclose">
							<u-icon name="close-circle-fill" color="#aaa"></u-icon>
						</view>
						<u-icon name="arrow-down" color="#aaa" v-else></u-icon>
					</view>
					<view style="flex: 1;">
						<u-search :show-action="true" v-model="queryParams.noticeTitle" actionText="搜索" placeholder="请输入通知标题" :animation="true" :actionStyle="{ color: '#666' }" @clear="getLists()" @search="getLists()" @custom="getLists()"></u-search>
					</view>
				</view>
			</view>
		</u-sticky>
		
		<view style="padding: 30rpx">
			<view class="listitem" v-for="(item, index) in tableData" :key="index"
				@click="pagelink(item)">
				<view class="tit">{{ item.noticeTitle || '--' }}</view>
				<view class="flex">
					<text>项目名称</text>
					<view class="name">{{ item.projectName || '--' }}</view>
				</view>
				<view class="flex">
					<text>施工单位</text>
					<view class="name">{{ item.enterpriseName || '--' }}</view>
				</view>
				<view class="flex">
					<text>下发时间</text>
					<view class="name">{{ (item.createTime || '--').split(' ')[0] }}</view>
				</view>
				<view class="flex">
					<text>整改状态</text>
					<view>
						<dictTag :options="rectification_status" :value="item.status.toString()" class="tag" :style="statuscy(item.status)" v-if="item.status!==null&&item.status!==undefined" />
						<view v-else>--</view>
					</view>
				</view>
			</view>
		
			<view style="padding-top: 50rpx;" v-if="tableData.length==0">
				<u-empty text="暂无数据" :icon="emptyIcon"></u-empty>
			</view>
		</view>
	
		<sy-picker ref="sypicker" mobile="1" :type="0" :items="rectification_status" @select="handleSelect" />
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad,onShow,onReachBottom } from "@dcloudio/uni-app";
import emptyIcon from "@/pagesC/static/images/ndata.png"
import {rectification_status,dictLabel} from "@/utils/common.js"
import { rectifyNoticeList } from '@/api/qss/zxhapi.js'
import { func } from '../../uni_modules/uview-plus/libs/function/test';

const sypicker = ref('')
const sollfunct = ref(0)
const tableData = ref([])
const queryParams = ref({
	status: '',
	noticeTitle: '',
	projectId: '',
	pageSize: 10,
	pageNum: 1,
})

function pagelink(item){
	uni.navigateTo({
		url: '/pagesC/project/arrangeEdit?id='+item.noticeId
	})
}

function onselect(val){
	sypicker.value.showPicker(val)
}
function onclose(){
	queryParams.value.status = ''
	getLists()
}

function handleSelect(e){
	queryParams.value.status = e.value
	getLists()
}

function getLists() {
	queryParams.value.pageNum = 1
	tableData.value = []
	getList()
}

function getList(){
	rectifyNoticeList(queryParams.value).then(res=>{
		console.log(res, '列表')
		if (res.rows) {
			tableData.value.push(...res.rows);
			let total =  res.total || 0
			queryParams.value.pageSize * queryParams.value.pageNum < total ? sollfunct.value = 1 : sollfunct.value = 0
		} else {
			sollfunct.value = 0
		}
	}).finally(()=>{
		uni.hideLoading()
	})
};

function statuscy(type) {
	let style = {}
	if (type == 1) {
		style = { background: '#FFF9EF', color: '#F59B03', borderColor: '#F59B03' }
	} else if (type == 2) {
		style = { background: '#E3F5FF', color: '#25B2FD', borderColor: '#25B2FD' }
	} else if (type == 3) {
		style = { background: '#FFF1F1', color: '#F92525', borderColor: '#F92525' }
	} else {
		style = { background: '#f5f5f5', color: '#888888', borderColor: '#dddddd' }
	}
	return style
}

onReachBottom(() => {
	if (sollfunct.value == 1) {
		queryParams.value.pageNum++
		getList()
	}
})

onLoad((option)=>{
	queryParams.value.projectId = option.pid || ''//'66f593fb-59f2-44de-9f2e-f6d056b5e754'
	uni.removeStorageSync("grrangeshop")
	getLists()
})

onShow(()=>{
	if(uni.getStorageSync('grrangeshop')) {
		getLists()
	}
})

</script>

<style lang="less" scoped>
.agepage{
	min-height: 100%;
	background: #f8f8f8;
	.selectbox {
		width: 90px;
		margin-right: 5px;
		padding-right: 10px;
		border-right: 1px solid #ddd;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.value{
			padding: 0 10rpx 0 20rpx;flex: 1;color: #333;
		}
	}
	.listitem {
		padding: 30rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		line-height: 1.5;
	
		.tit {
			line-height: 1.6;
			font-size: 36rpx;
			margin-bottom: 10rpx;
			font-weight: bold;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			word-break: normal;
			word-wrap: break-word;
			overflow: hidden;
		}
	
		.flex {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			line-height: 2;
			align-items: center;
	
			text {
				color: #666;
			}
			.tag {
				background-color: #e3f0ff;
				color: #1e77ff;
				line-height: 1.2;
				font-size: 24rpx;
				padding: 4rpx 10rpx;
				border: 1px solid #e3f0ff;
				border-radius: 4px;
				display: inline-block;
			}
		}
	}
}
</style>